<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>表单和v-model</title>
</head>
<body>
    <div id="app">
        <input type="radio" v-model="picked" value="html" id="html">
        <label for="html">HTML</label>
        <br/>
        <input type="radio" v-model="picked" value="js" id="js">
        <label for="js">JS</label>
        <br/>
        <input type="radio" v-model="picked" value="css" id="css">
        <label for="css">CSS</label>
        <br/>
        <P>选择的项是：{{ picked }}</P>
        <hr/>
        <input type="checkbox" v-model="checked" id="checked"/>
        <label for="checked">选择状态： {{ checked }}</label>
        <hr/>
        <input type="checkbox" v-model="checked2" value="html" id="html">
        <label for="html">HTML</label>
        <br/>
        <input type="checkbox" v-model="checked2" value="js" id="js">
        <label for="js">JS</label>
        <br/>
        <input type="checkbox" v-model="checked2" value="css" id="css">
        <label for="css">CSS</label>
        <br/>
        <P>选择的项是：{{ checked2 }}</P>
        <hr/>
        <h4>选择列表</h4>
        <!-- multiple 添加属性：多选 -->
        <select v-model="selected">
            <option 
                v-for="option of options"
                :value="option.value">{{ option.text }}</option>
        </select>
        <p>选择的项是：{{ selected }}</p>
        <hr/>
        <input type="radio" v-model="picked2" :value="value">
        <label>单选按钮</label>
        <p>app.picked2: {{ picked2 }}</p>
        <p>app.value2: {{ value }}</p>
        <p>选中时app.picked2 === app.value</p>
        <hr/>
        <h4>复选框</h4>
        <input
            type="checkbox"
            v-model="toggle"
            :true-value="value1"
            :false-value="value2"/>
        <label>复选框</label>
        <p>toggle：{{ toggle }}</p>
        <p>value1：{{ value1 }}</p>
        <p>value2：{{ value2 }}</p>
        <p>勾选时，app.toggle ==== app.value1;未勾选时app.toggle ==== app.value2</p>
        <hr/>
        <h4>选择列表</h4>
        <select v-model="selected2">
            <option :value="{ number: 123 }">123</option>
        </select>
        <p>selected2.number:{{ selected2.number }}</p>
        <p>{{typeof selected2}}</p>
        <p>当选中时，app.selected2是一个Object, 所有app.seleted2.number === 123</p>
        <hr/>
        <h2>修饰符</h2>
        <h4>.lazy</h4>
        <input type="text" v-model.lazy="message">
        <p>message : {{ message }}</p>
        <p>.lazy会转变在change事件中的同步<br/>这时，message并不是实时改变的，而是在失焦或按回车时才更新</p>
        <h4>.number</h4>
        <input type="number" v-model.number="message">
        <p>{{ typeof message2 }}</p>
        <h4>.trim</h4>
        <input type="text" v-model.trim="message3">
        <p>message3:{{ message3 }}</p>
    </div>
    <!-- 开发环境版本，包含了用帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                picked: 'js',
                checked: false,
                checked2: ['html', 'css'],
                selected: 'css',
                options: [
                    {text: 'HTML', value: 'html'},
                    {text: 'JavaScript', value: 'js'},
                    {text: 'CSS', value: 'css'}
                ],
                picked2: false,
                value: 123,
                toggle: false,
                value1: 'a',
                value2: 'b',
                selected2: '',
                message: '',
                message2: 123,
                message3: ''
            }
        })
    </script>
</body>
</html>